<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">发送请求</button>
    <div class="box"></div>
    
</body>
<script>
    var btn = document.querySelector(".btn")
    var box = document.querySelector(".box")
    btn.addEventListener('click',function(){
        //在这里发送Ajax请求
        // alert('测试')
        //1.创建Ajax核心对象
        var xhr = new XMLHttpRequest();
        //2.注册回调函数
        xhr.onreadystatechange = function(){
            if(4 == this.readyState){
                if(200 == this.status){
                    box.innerHTML = this.responseText
                }else{
                    alert(this.status)
                }
            }
        }
        //3.开启通道
        xhr.open('GET','./Ajax-request.html',true)
        //4.发送请求
        xhr.send();
    })
</script>
</html>